<template>
  <div> 
      <div class="head"><strong>首页</strong> > 商品管理 > 商品列表</div>
      <el-card>
  <el-row :gutter="20">
        <el-col :span="6">
          <el-input
            placeholder="请输入内容"
            v-model="querryinfo.query"
            clearable
            @clear="getgoodslist"
          >
            <el-button
              slot="append"
              icon="el-icon-search"
              @click="getgoodslist"
            ></el-button>
          </el-input>
        </el-col>
        <el-col :span="6"
          ><div >
            <el-button type="primary" @click="hot"
              >添加商品</el-button
            >
          </div></el-col
        >
      </el-row>
     <el-table
      :data="goodslist"
      style="width: 100%"
      border
      stripe
       class="tables"
      >
      <el-table-column
       type='index'
        >
      </el-table-column>
      <el-table-column
        prop="goods_name"
        label="商品名称"
        width="800">
      </el-table-column>
      <el-table-column
        prop="goods_price"
        label="商品价格(元)"
        width="120">
      </el-table-column>
      <el-table-column
        prop="goods_weight"
        label="商品重量"
        width="120">
      </el-table-column>
      <el-table-column
        prop="add_time"
        label="创建时间"
        width="180">
        <template slot-scope="scope">
              {{scope.row.add_time|dateFormat}}
        </template>
      </el-table-column>
       <el-table-column
        label="操作"
        >
        <template slot-scope="scope">
                <el-button
                  type="primary"
                  icon="el-icon-edit"
                  @click='log(scope.row)'
                  >编辑</el-button
                >
                <el-button
                  type="danger"
                  icon="el-icon-delete"
                  @click="remove(scope.row.goods_id )"
                  >删除</el-button
                >
              </template>
      </el-table-column>
    </el-table>
    <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="querryinfo.pagenum"
        :page-sizes="[1, 3, 5, 7]"
        :page-size="querryinfo.pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
      </el-card>
      </div>
</template>

<script>
export default {
    created(){
       this.getgoodslist()
    },
   data(){
       return{
           total:0,
           querryinfo:{
               query:'',
               pagenum:1,
               pagesize:7
           },
           goodslist:[],

       }
   },
   methods:{
     async  getgoodslist(){
      const{data:res} = await this.$http.get('goods',{params:this.querryinfo})
           if(res.meta.status!==200){
               return this.$message.error(res.meta.msg)
           }
           console.log(res);
           this.$message.success(res.meta.msg)
           this.goodslist=res.data.goods
           this.total=res.data.total
       },
       handleSizeChange(mk){
                 this.querryinfo.pagesize=mk
                 this.getgoodslist()
       },
       handleCurrentChange(ms){
                 this.querryinfo.pagenum=ms
                 this.getgoodslist()
       },
        async remove(id) {
      const bug = await this.$confirm(
        '此操作将永久删除该用户, 是否继续?',
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        }
      ).catch((err) => err)
      //console.log(bug)
      //成功时是confirm
      //取消是cancel
      if (bug !== 'confirm') {
        this.$message.info('已取消删除')
      } else {
        const { data: res } = await this.$http.delete(`goods/${id}`)
        if (res.meta.status !== 200) {
          return this.$message.error('删除用户失败')
        }
        this.$message.success('删除成功')
        this.getgoodslist()
      }
    },
      hot(){
        this.$router.push('/goods/add')
      },
    log(data){
        setTimeout(() => {
           this.$bus.$emit('hell',data)
        }, 100);
         this.$router.push('/goods/bianji')
    }
   }
}
</script>

<style lang='less' scope>
.head{
 margin-left: 20px;
  margin-top: 25px;
  font-size: 14px;
  margin-bottom: 20px;
}
.tables{
    margin-top: 10px;
}
</style>